<!--
 * @Author: cl
 * @Description: 
 * @Date: 2023-05-12 15:31:48
 * @LastEditTime: 2023-05-12 17:46:51
 * @FilePath: \vue3\src\views\tripartitelibrary\three\index.vue
 * @LastEditors: cl
-->
<template>
    <div class="wraps">
        <div id="test" style="margin-top: 50px;margin-left: 100px;" ref="webglRef"></div>
    </div>
</template>

<script setup>
import * as THREE from 'three';
// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { ref, onMounted } from 'vue'

const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度

/************************场景*****************************/
// 创建3D场景对象Scene
const scene = new THREE.Scene();
//创建几何体
const geometry = new THREE.BoxGeometry(100, 100, 100);
//创建一个材质对象Material
const material = new THREE.MeshLambertMaterial({
    color: 0x0000ff, //设置材质颜色
    // transparent:true,//开启透明
    // opacity:0.5,//设置透明度
});
// 点光源
// const pointLight = new THREE.SpotLight(0xffffff, 1.0);
// pointLight.position.set(400, 200, 100);//点光源放在x轴上
// scene.add(pointLight); //点光源添加到场景中

// const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
// scene.add(pointLightHelper);
//环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0, 10, 0);
scene.add(mesh);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh;
scene.add(directionalLight);

/************************摄像机*****************************/
const camera = new THREE.PerspectiveCamera(50, width / height, 1, 3000);

// camera.lookAt(-1000, 0, 0); //坐标原点
// camera.lookAt(0, 10, 0);  //y轴上位置10
// camera.lookAt(mesh.position);//指向mesh对应的位置
// // 相机位置xyz坐标：200, 200, 200
// // camera.position.set(200, 200, 200);
// camera.position.set(-200, 0, 0);

camera.position.set(-1000, 0, 0);
camera.lookAt(0, 0, 0);
// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)


// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
document.body.appendChild(renderer.domElement);
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

// 渲染循环
const clock = new THREE.Clock();
function render() {
    const spt = clock.getDelta()*1000;//毫秒
    console.log('两帧渲染时间间隔(毫秒)',spt);
    console.log('帧率FPS',1000/spt);
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();

onMounted(() => {
    document.getElementById('test')?.appendChild(renderer.domElement)
})
</script>

<style scoped>
html,
body {
    background: #ccc;
    height: 100vh;
    margin: 0 !important;
}

.wraps {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin: 0 !important;
}
</style>